<template>
  <el-card class="odds-range-card" shadow="never">
    <template #header>
      <div class="card-header-wrapper">
        <span>赔率范围设置</span>
        <div class="checkbox-group">
          <el-checkbox-group v-model="checkedOptions" @change="handleCheckedOptionsChange">
            <el-checkbox label="initialOdds">初赔</el-checkbox>
            <el-checkbox label="finalOdds">终赔</el-checkbox>
            <el-checkbox label="initialProb">初概</el-checkbox>
            <el-checkbox label="finalProb">终概</el-checkbox>
            <el-checkbox label="initialReturn">初始返还</el-checkbox>
            <el-checkbox label="finalReturn">临场返还</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="actions-group">
          <el-checkbox v-model="isAllSelected" :indeterminate="isIndeterminate" @change="handleSelectAllChange">
            全选
          </el-checkbox>
          <el-divider direction="vertical" />
          <el-button type="primary" size="small" @click="resetRangeInputs" style="margin-left: 10px;">重置范围</el-button>
        </div>
      </div>
    </template>

    <div class="odds-range-content">
      <!-- 初始赔率范围 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="range-input-group">
            <h4>初始主队赔率范围 ({{ originalValues?.homeInitial || '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.homeInitialMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, homeInitialMin: value })"
                  :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('homeInitialMin', 'homeInitialMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.homeInitialMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, homeInitialMax: value })"
                  :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>初始平局赔率范围 ({{ originalValues?.drawInitial || '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.drawInitialMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, drawInitialMin: value })"
                   :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('drawInitialMin', 'drawInitialMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.drawInitialMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, drawInitialMax: value })"
                   :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>初始客队赔率范围 ({{ originalValues?.awayInitial || '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.awayInitialMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, awayInitialMin: value })"
                   :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('awayInitialMin', 'awayInitialMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.awayInitialMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, awayInitialMax: value })"
                  :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="range-input-group">
            <h4>临场主队赔率范围 ({{ originalValues?.homeFinal || '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.homeFinalMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, homeFinalMin: value })"
                   :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('homeFinalMin', 'homeFinalMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.homeFinalMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, homeFinalMax: value })"
                  :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>临场平局赔率范围 ({{ originalValues?.drawFinal || '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.drawFinalMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, drawFinalMin: value })"
                   :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('drawFinalMin', 'drawFinalMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.drawFinalMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, drawFinalMax: value })"
                   :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>临场客队赔率范围 ({{ originalValues?.awayFinal || '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.awayFinalMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, awayFinalMin: value })"
                  :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('awayFinalMin', 'awayFinalMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.awayFinalMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, awayFinalMax: value })"
                   :precision="3"
                  :step="0.1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!-- 初始概率范围 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="range-input-group">
            <h4>初始主胜概率范围 ({{ originalValues?.probHomeInitial ? (originalValues.probHomeInitial).toFixed(2) + '%' : '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probHomeInitialMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probHomeInitialMin: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('probHomeInitialMin', 'probHomeInitialMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probHomeInitialMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probHomeInitialMax: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>初始平局概率范围 ({{ originalValues?.probDrawInitial ? (originalValues.probDrawInitial).toFixed(2) + '%' : '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probDrawInitialMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probDrawInitialMin: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('probDrawInitialMin', 'probDrawInitialMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probDrawInitialMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probDrawInitialMax: value })"
                   :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>初始客胜概率范围 ({{ originalValues?.probAwayInitial ? (originalValues.probAwayInitial).toFixed(2) + '%' : '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probAwayInitialMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probAwayInitialMin: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('probAwayInitialMin', 'probAwayInitialMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probAwayInitialMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probAwayInitialMax: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!-- 临场概率范围 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="range-input-group">
            <h4>临场主胜概率范围 ({{ originalValues?.probHomeFinal ? (originalValues.probHomeFinal).toFixed(2) + '%' : '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probHomeFinalMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probHomeFinalMin: value })"
                   :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('probHomeFinalMin', 'probHomeFinalMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probHomeFinalMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probHomeFinalMax: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>临场平局概率范围 ({{ originalValues?.probDrawFinal ? (originalValues.probDrawFinal).toFixed(2) + '%' : '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probDrawFinalMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probDrawFinalMin: value })"
                   :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('probDrawFinalMin', 'probDrawFinalMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probDrawFinalMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probDrawFinalMax: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>临场客胜概率范围 ({{ originalValues?.probAwayFinal ? (originalValues.probAwayFinal).toFixed(2) + '%' : '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probAwayFinalMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probAwayFinalMin: value })"
                   :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('probAwayFinalMin', 'probAwayFinalMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.probAwayFinalMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, probAwayFinalMax: value })"

                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!-- 初始返还率范围 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="range-input-group">
            <h4>初始返还率范围 ({{ originalValues?.returnRateInitial ? (originalValues.returnRateInitial).toFixed(2) + '%' : '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.returnRateInitialMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, returnRateInitialMin: value })"
                   :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('returnRateInitialMin', 'returnRateInitialMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.returnRateInitialMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, returnRateInitialMax: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="range-input-group">
            <h4>临场返还率范围 ({{ originalValues?.returnRateFinal ? (originalValues.returnRateFinal).toFixed(2) + '%' : '-' }})</h4>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.returnRateFinalMin"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, returnRateFinalMin: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="range-separator">
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  circle
                  @click="clearRangeValue('returnRateFinalMin', 'returnRateFinalMax')"
                  style="padding: 5px;"
                />
              </el-col>
              <el-col :span="11">
                <el-input-number
                  :model-value="props.rangeValues.returnRateFinalMax"
                  @update:model-value="value => emit('update:rangeValues', { ...props.rangeValues, returnRateFinalMax: value })"
                  :precision="2"
                  :step="1"
                  size="small"
                  style="width: 100%"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>


    </div>
  </el-card>
</template>

<script setup>
import { computed, watch, ref, onMounted, nextTick } from 'vue';

// Define props
const props = defineProps({
  rangeValues: {
    type: Object,
    default: () => ({
      homeInitialMin: 1.0,
      homeInitialMax: 10.0,
      drawInitialMin: 1.0,
      drawInitialMax: 10.0,
      awayInitialMin: 1.0,
      awayInitialMax: 10.0,
      homeFinalMin: 1.0,
      homeFinalMax: 10.0,
      drawFinalMin: 1.0,
      drawFinalMax: 10.0,
      awayFinalMin: 1.0,
      awayFinalMax: 10.0,
      probHomeInitialMin: 0.0,
      probHomeInitialMax: 100.0,
      probDrawInitialMin: 0.0,
      probDrawInitialMax: 100.0,
      probAwayInitialMin: 0.0,
      probAwayInitialMax: 100.0,
      probHomeFinalMin: 0.0,
      probHomeFinalMax: 100.0,
      probDrawFinalMin: 0.0,
      probDrawFinalMax: 100.0,
      probAwayFinalMin: 0.0,
      probAwayFinalMax: 100.0,
      returnRateInitialMin: 0.0,
      returnRateInitialMax: 100.0,
      returnRateFinalMin: 0.0,
      returnRateFinalMax: 100.0
    })
  },
  originalValues: {
    type: Object,
    default: null // Allow original values to be null initially
  }
});

// Define emits
const emit = defineEmits(['reset', 'search', 'update:rangeValues']);

const allOptions = ['initialOdds', 'finalOdds', 'initialProb', 'finalProb', 'initialReturn', 'finalReturn'];
const checkedOptions = ref([]);
const isAllSelected = ref(false);
const isIndeterminate = ref(false);

const optionToKeysMap = {
  initialOdds: ['homeInitialMin', 'homeInitialMax', 'drawInitialMin', 'drawInitialMax', 'awayInitialMin', 'awayInitialMax'],
  finalOdds: ['homeFinalMin', 'homeFinalMax', 'drawFinalMin', 'drawFinalMax', 'awayFinalMin', 'awayFinalMax'],
  initialProb: ['probHomeInitialMin', 'probHomeInitialMax', 'probDrawInitialMin', 'probDrawInitialMax', 'probAwayInitialMin', 'probAwayInitialMax'],
  finalProb: ['probHomeFinalMin', 'probHomeFinalMax', 'probDrawFinalMin', 'probDrawFinalMax', 'probAwayFinalMin', 'probAwayFinalMax'],
  initialReturn: ['returnRateInitialMin', 'returnRateInitialMax'],
  finalReturn: ['returnRateFinalMin', 'returnRateFinalMax']
};

const calculateOriginalBasedValues = () => {
  const calculatedValues = {};
  if (props.originalValues) {
    // For odds values: ±0.02 from original
    if (props.originalValues.homeInitial !== undefined) {
      calculatedValues.homeInitialMin = Math.max(0.01, props.originalValues.homeInitial - 0.02);
      calculatedValues.homeInitialMax = Math.min(999, props.originalValues.homeInitial + 0.02);
    }
    if (props.originalValues.drawInitial !== undefined) {
      calculatedValues.drawInitialMin = Math.max(0.01, props.originalValues.drawInitial - 0.02);
      calculatedValues.drawInitialMax = Math.min(999, props.originalValues.drawInitial + 0.02);
    }
    if (props.originalValues.awayInitial !== undefined) {
      calculatedValues.awayInitialMin = Math.max(0.01, props.originalValues.awayInitial - 0.02);
      calculatedValues.awayInitialMax = Math.min(999, props.originalValues.awayInitial + 0.02);
    }
    if (props.originalValues.homeFinal !== undefined) {
      calculatedValues.homeFinalMin = Math.max(0.01, props.originalValues.homeFinal - 0.02);
      calculatedValues.homeFinalMax = Math.min(999, props.originalValues.homeFinal + 0.02);
    }
    if (props.originalValues.drawFinal !== undefined) {
      calculatedValues.drawFinalMin = Math.max(0.01, props.originalValues.drawFinal - 0.02);
      calculatedValues.drawFinalMax = Math.min(999, props.originalValues.drawFinal + 0.02);
    }
    if (props.originalValues.awayFinal !== undefined) {
      calculatedValues.awayFinalMin = Math.max(0.01, props.originalValues.awayFinal - 0.02);
      calculatedValues.awayFinalMax = Math.min(999, props.originalValues.awayFinal + 0.02);
    }

    // For probability and return rate values: ±1 from original
    const fields = ['probHomeInitial', 'probDrawInitial', 'probAwayInitial', 'probHomeFinal', 'probDrawFinal', 'probAwayFinal', 'returnRateInitial', 'returnRateFinal'];
    fields.forEach(field => {
      if (props.originalValues[field] !== undefined) {
        calculatedValues[`${field}Min`] = Math.max(0, props.originalValues[field] - 1);
        calculatedValues[`${field}Max`] = Math.min(100, props.originalValues[field] + 1);
      }
    });
  }
  return calculatedValues;
};

// Update range values based on original values when originalValues change or on mount
const updateRangeValuesFromOriginal = () => {
  if (props.originalValues) {
    const updatedValues = calculateOriginalBasedValues();
    // Emit update to parent component
    emit('update:rangeValues', updatedValues);
  }
};

const handleCheckedOptionsChange = (value) => {
  checkedOptions.value = value;
  isAllSelected.value = value.length === allOptions.length;
  isIndeterminate.value = value.length > 0 && value.length < allOptions.length;
  updateRangesBasedOnSelection();
};

const handleSelectAllChange = (val) => {
  checkedOptions.value = val ? allOptions : [];
  isAllSelected.value = val;
  isIndeterminate.value = false;
  updateRangesBasedOnSelection();
};

const updateRangesBasedOnSelection = () => {
  const newValues = { ...props.rangeValues };
  const originalBasedValues = getOriginalBasedValues();

  allOptions.forEach(option => {
    const keys = optionToKeysMap[option];
    if (checkedOptions.value.includes(option)) {
      // Apply original-based values
      keys.forEach(key => {
        newValues[key] = originalBasedValues[key];
      });
    } else {
      // Clear values
      keys.forEach(key => {
        newValues[key] = null;
      });
    }
  });

  emit('update:rangeValues', newValues);
};

const getOriginalBasedValues = () => {
  return calculateOriginalBasedValues();
};

// Watch for changes to originalValues
watch(() => props.originalValues, () => {
  if (props.originalValues) {
    // Use nextTick to ensure the component has rendered and is ready for updates
    nextTick(() => {
      // Set the default checked option
      const defaultOption = 'initialProb';
      checkedOptions.value = [defaultOption];
      isIndeterminate.value = true;
      isAllSelected.value = false;

      // Calculate the full set of potential values
      const originalBasedValues = calculateOriginalBasedValues();
      const newValues = {};

      // Initialize all keys to null
      Object.keys(props.rangeValues).forEach(key => {
          newValues[key] = null;
      });

      // Only populate the values for the default selected option
      const keys = optionToKeysMap[defaultOption];
      if (keys) {
          keys.forEach(key => {
              newValues[key] = originalBasedValues[key];
          });
      }

      emit('update:rangeValues', newValues);
    });
  }
}, { deep: true, immediate: true }); // `immediate: true` runs the watcher on component mount

// Methods
const resetRangeInputs = () => {
  emit('reset');
};

const searchByRange = () => {
  emit('search');
};

const clearRangeValue = (minKey, maxKey) => {
  const newValues = { ...props.rangeValues };
  // Set the min and max values to their default values (essentially clearing the custom range)
  // Based on the default values in the props
  if (minKey.includes('prob') || minKey.includes('returnRate')) {
    // For probability and return rate values
    if (minKey.includes('Initial')) {
      newValues[minKey] = null;  // Default minimum for probabilities/return rates
      newValues[maxKey] = null;  // Default maximum for probabilities/return rates
    } else {
      newValues[minKey] = null;  // Default minimum for probabilities/return rates
      newValues[maxKey] = null;  // Default maximum for probabilities/return rates
    }
  } else {
    // For odds values
    if (minKey.includes('Initial')) {
      newValues[minKey] = null;  // Default minimum for odds
      newValues[maxKey] = null;  // Default maximum for odds
    } else {
      newValues[minKey] = null;  // Default minimum for odds
      newValues[maxKey] = null;  // Default maximum for odds
    }
  }
  emit('update:rangeValues', newValues);
};




</script>

<style scoped>
.odds-range-card {
  margin-bottom: 20px;
}

.odds-range-content {
  padding: 10px 0;
}

.range-input-group {
  margin-bottom: 20px;
}

.range-input-group h4 {
  margin-bottom: 10px;
  font-size: 14px;
  color: #606266;
}

.range-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #606266;
}

.search-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.card-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card-header-wrapper span {
  font-weight: bold;
  color: #303133;
}

.checkbox-group {
  flex-grow: 1;
  text-align: center;
}
.actions-group {
    display: flex;
    align-items: center;
}
</style>